<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <title>首页 - 工具集合</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="/style/default/index.css">
  <link rel="stylesheet" href="/style/default/my.css">
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
  <style>
    .btn_cls {
      padding:15px 10px 10px 10px;
      width:90%;
      font-size:1.1rem;
    }

    .btn_cls i {
      font-size:2.0rem;
      height: 3rem;
    }

    .btn_cls2 {
      padding:15px 10px 10px 10px;
      width:90%;
      text-align: left;
    }

    .btn_cls2 span {
      font-size:1.2rem;
      height: 3rem;
    }

    .btn_cls2 div {
      font-size:0.9rem;
      text-align: right;
    }
  </style>
</head>

<body style="background-color:#f8f8f8;margin: 20px;">
<div id="app" >

  <div v-show="loadLoading" style="font-size: 2.0rem; text-align: center;margin-top: 200px;">
    {{msg}}
  </div>

  <div v-show="!loadLoading" style="font-size: 2.0rem; text-align: center;margin-top: 200px;display:none;">
    <a :href="linkUrl" target="_asdfasdf">点击进入授权页面</a>
  </div>

</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/my_util.js?t=29348"></script>

<script>
  var vm = new Vue({
    el: '#app',
    data: function () {
      return {
        tagHeight: window.innerHeight / 5, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
        loadLoading: false, // 显示等待中
        msg:"读取配置参数中，请稍等...",

        componentAppid:"", // 开放平台 appid
        preAuthCode:"", // 预授权码
        redirectUri:"",  // 授权成功回调页面
        authType:"", // 要授权的帐号类型
         
      }
    },
    computed: { 
      linkUrl: function () {
        if(isNoNull(this.componentAppid) && isNoNull(this.preAuthCode) 
          && isNoNull(this.redirectUri) && isNoNull(this.authType)){
            return 'https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=' + this.componentAppid + '&pre_auth_code=' + this.preAuthCode + '&redirect_uri=' + this.redirectUri + '&auth_type=' + this.authType + ''
          } else {
            return "#"
          } 
      }
    },
    mounted() {
      // 当窗口大小发生改变的时候系统自动调用
      window.onresize = () => {
        this.pageResize();
      }
    },
    methods: {
      // 改变表格高度
      pageResize() {
        this.tagHeight = window.innerHeight / 5;
      },

    },
  });

  // 自动执行，读取表格数据等
  function loadInitData() {
    vm.loadLoading = true;
    axios.get('/guest/weixin/get_componentlogin_info.bu')
      .then(function (response) {
        if (response.data.code > 0) {
          var data = response.data.bundle;
          vm.componentAppid = data.componentAppid;  // 开放平台 appid
          vm.preAuthCode = data.preAuthCode;        // 预授权码
          vm.redirectUri = data.redirectUri;        // 授权成功回调页面
          vm.authType = data.authType;              // 要授权的帐号类型
          vm.loadLoading = false;
        } else {
          vm.msg = response.data.msg;
          //vm.$message.error(response.data.msg);
        } 
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
      })
     
  }

  loadInitData();

</script>

</html>